<template>
  <div class="tableExport">
    <el-button
      class="ml10 tableStats-btn tableStats-btn-active exportHover mr10"
       type="primary"
      :loading="isExporting"
      @click="handleExport"
    >
      {{ isExporting ? "正在导出" : "列表导出" }}
    </el-button>
    <a href ref="downLoadRef"></a>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
export default {
  data() {
    return {
      myDownLoadList: this.downLoadList,
      isExporting: false,
      allSelect: true,
      // 点击导出列表
      isShow: false,
      // 点击导出按钮
      isBtnShow: false,
    };
  },
  methods: {
    click(data, name) {
      const url = window.URL.createObjectURL(
        new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        })
      );
      let link = this.$refs["downLoadRef"];
      link.setAttribute("download", `${name}.xlsx`);
      link.href = url;
      link.click();
      this.isExporting = false;
    },
    handleExport() {
      MessageBox.confirm(
        "请选择导出方式，选择“查询结果”仅导出筛选后的数据（包含排序条件、快速检索条件、查询条件）",
        "提示",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "全部导出",
          cancelButtonText: "查询结果",
          center: true,
        }
      )
        .then(() => {
          this.$emit("handleExport", 1);
          this.isExporting = true;
        })
        .catch((action) => {
          if (action == "cancel") {
            this.$emit("handleExport", 2);
            this.isExporting = true;
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.tableExport {
  display: inline-block;
  margin-left: 5px ;
 .exportHover:hover{
      background: #027aff;border: 1px solid #027AFF;
   
 }
  /deep/ .el-button{
    padding: 6px 24px;
    span{
      height:19px;
      display:inline-block;
      line-height:19px;
      font-size: 14px;
    }
  }
}
</style>
